<!-- <template>
 <div class="tmpl">
   <div class="head">
     <ul class="clearfix">
       <li v-for="video in videos" >
        <div class="list">
          <div class="img">
            <img :src="video.src">
          </div>
          <div class="bot">
            {{video.bot}}
          </div>
        </div>
       </li>

     </ul>
   </div>
 </div>
</template>

<script type="text/javascript">

export default{
  data(){
    return {
      videos: [
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第一条'
        },
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第二条'
        },
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第三条'
        },
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第四条'
        },
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第五条'
        },
        {
          src: "../../../statics/imgs/menu3.png",
          bot: '第六条'
        }
      ]
    }
  }
}
</script>

<style type="text/css" scoped>

  *{
    margin: 0;
    padding: 0;
  }
  .clearfix{overflow:auto;_height:1%}

  .list img{
    width: 100%;
  }
  .list .bot{
    text-align: center;
  }
  .head li{
    list-style: none;
    float: left;
    width: 25%;
    padding: 5px;
    box-sizing: border-box;
  }
</style>

 -->

 <template>
   <div>
      <vscroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <ul>
          <li style="height: 40px" v-for="(item,index) in listdata" >{{item.addressId}}</li>
          <li v-for="(item,index) in downdata" >{{item.name}}</li>
        </ul>
     </vscroll>
   </div>
 </template>


 <script>
 import vscroll from './scroll.vue';

 export default{
  data () {
     return {
       counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
       num : 15,  // 一次显示多少条
       pageStart : 0, // 开始页数
       pageEnd : 0, // 结束页数
       listdata: [], // 下拉更新数据存放数组
       downdata: []  // 上拉更多的数据存放数组
     }
   },
   mounted : function(){
      this.getList();
   },
   methods: {
     getList(){
        let vm = this;
           // vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').
           vm.$http.get('../../../statics/data/scroll.json').then((response) => {
            console.log(response)
            console.log('--------我刷新你了-----')
                    vm.listdata = response.data.data.slice(0,15);
                  }, (response) => {
                     console.log('error');
                 });
     },
     onRefresh(done) {
              this.getList();

              done() // call done

     },
     onInfinite(done) {
               let vm = this;
               vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
                   vm.counter++;
                   vm.pageEnd = vm.num * vm.counter;
                   vm.pageStart = vm.pageEnd - vm.num;
                   let arr = response.data;
                      let i = vm.pageStart;
                      let end = vm.pageEnd;
                      for(; i<end; i++){
                         let obj ={};
                         obj["name"] = arr[i].name;
                         vm.downdata.push(obj);
                          if((i + 1) >= response.data.length){
                           this.$el.querySelector('.load-more').style.display = 'none';
                           return;
                         }
                         }
                   done() // call done
                    }, (response) => {
                     console.log('error');
                 });
            }
   },
   components : {
      vscroll
   }
 }
 </script>












